<template>
  <div class="wrapper">
    <template v-for="(item, idx) in menu">
      <template v-if="item.children && item.children.length > 0">
        <el-submenu :index="idx + ''">
          <template #title>
            <i class="el-icon-menu"></i>
            <span slot="title">{{ item.meta.title }}</span>
          </template>
          <template v-for="child in item.children" :key="child.path">
            <el-menu-item
              v-if="!child.hidden"
              :data-path="child.path"
              @click="addMenu(child.path, child.meta.title)"
              :index="child.path"
            >
              {{ child.meta.title }}
            </el-menu-item>
          </template>
        </el-submenu>
      </template>
      <!-- 没有子集 -->
      <template v-else>
        <el-menu-item
          :data-index="item.path"
          v-if="!item.hidden"
          @click="
            addMenu(item.path == '/' ? '/index' : item.path, item.meta.title)
          "
          :index="item.path == '/' ? '/index' : item.path"
          :key="item"
        >
          <i class="el-icon-menu"></i>
          <span slot="title">{{ item.meta.title }}</span>
        </el-menu-item>
      </template>
    </template>
  </div>
</template>
<script>
import { useStore } from "vuex";
export default {
  components: {},
  props: {
    menu: {
      type: Array,
    },
  },
  data() {
    return {};
  },
  setup() {
    const store = useStore();
    function addMenu(path, name) {
      keepaliveFun(path); //添加keep-alive缓存的数组
      build_nav_menu(path,name)//  添加横向导航的方法
    }
    // 添加横向导航的方法
    function build_nav_menu(path, name) {
      let arrIndex = store.state.tagArr.findIndex((item) => {
        //这里的判断条件按你需求来写
        return item.path === path;
      });
      if (arrIndex > -1) return;
      let current_nav = store.state.tagArr;
      if (current_nav.length > 8) {
        current_nav.splice(2, 1);
      }
      store.state.tagArr.push({ path: path, name: name });
      store.commit("setTag", store.state.tagArr);
    }
    // keep-alive
    function keepaliveFun(path) {
      let new_path = [...new Set(path.split("/"))];
      if (new_path.length) {
        new_path = new_path.pop();
      }
      let inclue_arr = store.state.includeList || [];
      if (!inclue_arr.includes(new_path)) {
        inclue_arr.push(new_path);
        localStorage.setItem("includeList", JSON.stringify(inclue_arr));
        store.commit("add_include_component", inclue_arr);
      }
    }
    return {
      addMenu,
    };
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  .el-submenu:deep(.el-menu-item) {
    background: #192752 !important;
  }
  .el-menu-item.is-active {
    background-color: #1890ff !important;
    color: #fff;
  }
  .el-submenu .el-menu-item {
    text-align: center;
  }
  .el-submenu__title {
    color: #fff;
  }
  .el-icon-message {
    color: #fff;
  }
  .el-submenu:deep() .el-submenu__title .el-submenu__icon-arrow {
    color: #fff !important;
  }
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>